<!--
 * @Date: 2025-01-09 14:33:14
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-09 17:44:58
 * @Description: 文件业务规则属性树结构面板
-->
<template>
  <el-tree
    ref="treeRef"
    :="treeAttrs"
    :data="treeState.data"
    @nodeClick="treeNodeClick"
  >
    <template #default="{ node, data }">
      <span :class="[
        'tree-content',
        data?.type === 'root' ? 'is-root' : '',
      ]">
        <span class="tree-content-contain">
          <div class="contain-star" v-if="data.nullable === 'N'">*</div>
          <span class="contain-lable" :title="node.label">{{ node.label }}</span>
          <span class="contain-check" v-if="data.status === 1">
            <el-icon v-if="data.status === 1" class="contain-check">
              <SuccessFilled />
            </el-icon>
          </span>
        </span>
      </span>
    </template>
  </el-tree>
</template>

<script setup>

import { defAxios } from '@/utils/http';
import { nextTick, reactive } from 'vue';

import { SuccessFilled } from '@element-plus/icons-vue'

const reqApis = {
  /**
   * 获取文件的规则数据
   */
  getFileRules (params) {
    return defAxios({
      url: '/uploadFile/rule',
      method: 'post',
      data: params
    })
  }
}

const emits = defineEmits(['nodeClick', 'nodeChange'])

const props = defineProps({
  // 业务ID
  busiId: { type: String, default: '' },
  // 业务类型
  busiType: { type: String, default: 'ET001' },
  // 工作流的KEY
  processKey: { type: String },
  // 业务属性
  busiProperty: { type: String, default: '%' }
})

const treeRef = ref()
const treeAttrs = reactive({
  props: {
    label: 'fileDesc',
    children: 'children',
  },
  nodeKey: 'ruleId',
  currentNodeKey: '1',
  defaultExpandAll: true,
  highlightCurrent: true,
  expandOnClickNode: false
})
const treeState = reactive({
  data: [],
  loading: false,
  currentKey: '1',
  currentNode: {},
})
const loadTreeData = async () => {
  treeState.loading = true
  const result = await reqGetFileRules()
  treeState.data = result
  nextTick(() => {
    treeRef.value.setCurrentKey(treeState.currentKey)
  })
  treeState.loading = false
}
/**
 * 树节点点击
*/
const treeNodeClick = (data, node) => {
  if (treeState.currentKey === data.ruleId) return
  treeState.currentKey = data.ruleId

  const pkgParams = JSON.parse(JSON.stringify(data))
  if (data.ruleId === '1') { pkgParams.ruleId = '' }

  emits('nodeChange', pkgParams, node)
}

/**
 * 请求获取附件的规则信息
 */
const reqGetFileRules = () => {
  const params = {
    busiId: props.busiId,
    busiType: props.busiType,
    processKey: props.processKey,
    busiProperty: props.busiProperty
  }
  return new Promise((resolve, reject) => {
    reqApis.getFileRules(params).then(res => {
      if (res.code === 200) {
        const result = [{
          type: 'root',
          ruleId: '1',
          fileDesc: '全部',
          children: res.data
        }]
        resolve(result)
      } else {
        console.error(res.msg);
        resolve([])
      }
    })
  })
}

loadTreeData()


defineExpose({
  loadTreeData
})

</script>

<style lang="scss" scoped>
.tree-content {
  width: 100%;
  padding: 0 5px;
  overflow: hidden;
  &.is-root {
    padding-left: 0;
  }
  &-contain {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .contain-star {
      position: absolute;
      color: red;
      font-weight: 600;
      top: 3px;
      bottom: 0;
      left: -4px;
      font-size: 16px;
    }
    .contain-lable {
      flex: 1;
      padding-right: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    .contain-check {
      color: #40c475;
    }
  }
}

:deep(.el-tree-node__expand-icon.is-leaf) {
  width: 0.5em;
  padding: 0;
} 
</style>